<template>
	<view class="centers">
		<u-toast ref="uToast" />
		<view class="browser-control">
			<view class="remove_control browser-allow" style="width: 100%;">
				<view class="box_radius" style="background-color: #f2f1f1;padding: 20rpx 30rpx;">
					<view class="remove_trust box box-pack-between box-align-center whiteTop">
						<view class="box box-align-center" style="width: 80%;">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/phone.png" mode="" style="height:80rpx;width: 80rpx;"></image>
							<view style="width: 78%;">
								<view class="system_text">电话功能开关</view>
								<view style="font-size: 18rpx;" class="address_txt system_text">关闭后不能呼入也不能呼出，防止骚扰电话
								</view>
							</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_call" @change="((val)=>{dataChange(val, 'setting_call')})" inactive-color="#e2e2e2" swtichTxt>
							</u-switch>
						</view>
					</view>
<!-- 					<view class="system box box-pack-between box-align-center" style="border: 0;">
						<view class="box box-align-center" style="width: 80%;">
							<image src="/static/phone.png" mode="" style="height: 80rpx;width: 80rpx;"></image>
							<view style="width: 78%;">
								<view class="system_text">通话白名单</view>
								<view style="font-size: 18rpx;" class="address_txt">
									{{setting_phones ? setting_phones : ''}}
								</view>
							</view>
						</view>
						<view class="" style="width: 20%;text-align: center;" @click="show = true">
							<view class="delete">编辑</view>
						</view>
					</view> -->
					<view class="system box box-pack-between box-align-center" style="border: 0;" v-if="false">
						<view class="box box-align-center" style="width: 80%;">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/phone.png" mode="" style="height: 80rpx;width: 80rpx;"></image>
							<view style="width: 78%;">
								<view class="system_text">应用安装白名单</view>
								<view style="font-size: 18rpx;" class="address_txt">
									{{setting_white_app_value ? setting_white_app_value : ''}}
								</view>
							</view>
						</view>
						<view class="" style="width: 20%;text-align: center;" @click="appShow = true">
							<view class="delete">编辑</view>
						</view>
					</view>
				</view>
				<view class="box_radius" style="background-color: #f2f1f1;padding: 0 30rpx;margin-top: 40rpx;">
					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control3.png" mode=""></image>
							</view>
							<view class="system_text">文件管理器功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_file" @change="((val)=>{dataChange(val, 'setting_file')})" inactive-color="#e2e2e2" swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control5.png" mode=""></image>
							</view>
							<view class="system_text">录音功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_recording" @change="((val)=>{dataChange(val, 'setting_recording')})" inactive-color="#e2e2e2"
								swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control7.png" mode=""></image>
							</view>
							<view class="system_text">图库功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_picture" @change="((val)=>{dataChange(val, 'setting_picture')})" inactive-color="#e2e2e2"
								swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center" style="border: 0;">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control8.png" mode=""></image>
							</view>
							<view class="system_text">音乐功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_music" @change="((val)=>{dataChange(val, 'setting_music')})" inactive-color="#e2e2e2" swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center" style="border: 0;">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control4.png" mode=""></image>
							</view>
							<view class="system_text">浏览器功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_browser" @change="((val)=>{dataChange(val, 'setting_browser')})" inactive-color="#e2e2e2"
								swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/shexT.png" mode=""></image>
							</view>
							<view class="system_text">相机功能开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_camera" @change="((val)=>{dataChange(val, 'setting_camera')})" inactive-color="#e2e2e2" swtichTxt>
							</u-switch>
						</view>
					</view>
					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/control4.png" mode=""></image>
							</view>
							<view class="system_text">网址输入开关</view>
						</view>
						<view class="system_control">
							<u-switch v-model="setting_browserInput" @change="((val)=>{dataChange(val, 'setting_browserInput')})"
								inactive-color="#e2e2e2" swtichTxt>
							</u-switch>
						</view>
					</view>
<!-- 					<view class="system box box-pack-between box-align-center">
						<view class="system_left box box-align-center">
							<view class="system_img">
								<image src="/static/vadio.png" mode=""></image>
							</view>
							<view class="system_text">影音格式管控</view>
						</view>
						<view class="system_control">
							<u-switch v-model="tfmediaShow" @change="yyChange" inactive-color="#e2e2e2" swtichTxt
								activeTxt="打开" inactiveTxt="关闭">
							</u-switch>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<u-modal v-model="show" :show-title="false" @confirm="phonesConfirm" negative-top="150" mask-close-able>
			<view class="slot-content">
				<view class="browser-center">
					<!-- <view class="browser-title">通话白名单设置</view> -->
					<view class="box box-pack-between box-align-center">
						<view>通话白名单开关:</view>
						<u-switch v-model="setting_phone" size="40" inactive-color="#e2e2e2" swtichTxt activeTxt="打开"
							inactiveTxt="关闭">
						</u-switch>
					</view>
					<view class="" style="margin-top: 20rpx;">
						<u-input size="mini" v-model="setting_phones" type="textarea" placeholder="请输入手机号码,多个已英文逗号分隔"
							placeholder-style="font-size:10px" :custom-style="inputObj" height="150" auto-height />
					</view>
				</view>
			</view>
		</u-modal>
		
		<u-modal v-model="appShow" :show-title="false" @confirm="appConfirm" negative-top="150" mask-close-able >
			<view class="slot-content">
				<view class="browser-center">
					<!-- <view class="browser-title">通话白名单设置</view> -->
					<view class="box box-pack-between box-align-center">
						<view>应用安装白名单开关:</view>
						<u-switch v-model="setting_white_app" size="40" inactive-color="#e2e2e2" swtichTxt activeTxt="打开"
							inactiveTxt="关闭">
						</u-switch>
					</view>
					<view class="" style="margin-top: 20rpx;">
						<u-input size="mini" v-model="setting_white_app_value" type="textarea" placeholder="请输入应用包名,多个已英文逗号分隔"
							placeholder-style="font-size:10px" :custom-style="inputObj" height="150" auto-height />
					</view>
				</view>
			</view>
		</u-modal>

		<u-modal v-model="formatShow" :show-title="false" @confirm="formatConfirm" confirm-text="确定" mask-close-able>
			<view class="slot-content format">
				<scroll-view scroll-y style="height: 520rpx;">
					<view class="box box-pack-between box-align-center">
						<view>音影格式开关:</view>
						<u-switch v-model="setting_tfmedia" @change="yyChange" inactive-color="#e2e2e2" swtichTxt
							activeTxt="管控" inactiveTxt="关闭">
						</u-switch>
					</view>
					<view class="select">
						<view class="box box-pack-between box-align-center">
							<text>图形文件格式黑名单:</text>
							<u-checkbox v-model="graph.checkAll" @change="checkedAll" style="margin-right:10px"
								shape="circle">全选
							</u-checkbox>
						</view>
						<u-checkbox-group v-model="graph.checkedCities" @change="checkboxGroupChange">
							<u-checkbox v-model="item.value" v-for="(item, index) in graph.cities" :key="index"
								shape="circle" :name="item.format">{{item.format}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="select">
						<view class="box box-pack-between box-align-center">
							<text>音频文件格式黑名单:</text>
							<u-checkbox v-model="voice.checkAll" @change="voicecheckedAll" style="margin-right:10px"
								shape="circle">
								全选
							</u-checkbox>
						</view>
						<u-checkbox-group v-model="voice.checkedCities" @change="voicecheckboxGroupChange">
							<u-checkbox v-model="item.value" v-for="(item, index) in voice.cities" :key="index"
								shape="circle" :name="item.format">{{item.format}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="select">
						<view class="box box-pack-between box-align-center">
							<text>视频文件格式黑名单:</text>
							<u-checkbox v-model="videos.checkAll" @change="videoscheckedAll" style="margin-right:10px"
								shape="circle">
								全选
							</u-checkbox>
						</view>
						<u-checkbox-group v-model="videos.checkedCities" @change="videoscheckboxGroupChange">
							<u-checkbox v-model="item.value" v-for="(item, index) in videos.cities" :key="index"
								shape="circle" :name="item.format">{{item.format}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="select">
						<view class="box box-pack-between box-align-center">
							<text>文档文件格式黑名单:</text>
							<u-checkbox v-model="docum.checkAll" @change="documcheckedAll" style="margin-right:10px"
								shape="circle">
								全选
							</u-checkbox>
						</view>
						<u-checkbox-group v-model="docum.checkedCities" @change="documcheckboxGroupChange">
							<u-checkbox v-model="item.value" v-for="(item, index) in docum.cities" :key="index"
								shape="circle" :name="item.format">{{item.format}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</scroll-view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getSetting,
		editSetting,
		queryTypeTfMedia
	} from '@/api/systemControl.js'
	export default {
		data() {
			return {
				inputObj: {
					'font-size': '8px',
					'background-color': '#dae0e7',
					'padding': '5px 10px',
					'border-color': '#dae0e7',
					'border': '1px solid #dae0e7',
					'border-radius': '10px',
					'color': '#333333'
				},
				setting_phones: '',
				setting_call: false,
				phones: '',
				show: false,
				id: 0,
				setting_phone: false,
				setting_file: false,
				setting_picture: false,
				setting_recording: false,
				setting_music: false,
				setting_browser: false,
				setting_camera: false,
				setting_browserInput: false,
				tfmediaShow: false,
				formatShow: false,
				setting_tfmedia: false,
				setting_white_app: false,//应用白名单管控
				setting_white_app_value: '',
				id: 0,
				//图形文件格式黑名单
				graph: {
					checkAll: false,
					checkedCities: [],
					cities: [],
				},
				//音频文件格式黑名单
				voice: {
					checkAll: false,
					checkedCities: [],
					cities: [],
				},
				//视频文件格式黑名单
				videos: {
					checkAll: false,
					checkedCities: [],
					cities: []
				},
				//文档文件格式黑名单
				docum: {
					checkAll: false,
					checkedCities: [],
					cities: []
				},
				appShow: false
			}
		},
		created() {
			this.getSettings(uni.getStorageSync('snId'))
		},
		methods: {
			browserInputChange(val) {
				this.geteditSetting(10, {
					setting_browserInput: Number(val)
				})
			},

			//获取管控设备信息
			getSettings(id) {
				getSetting({
					id: id
				}).then(res => {
					let data = res.data
					this.id = data.id
					this.setting_call = Boolean(data.setting_call)
					this.setting_phones = data.setting_phones
					this.setting_phone = Boolean(data.setting_phone)
					this.setting_file = Boolean(data.setting_file)
					this.setting_picture = Boolean(data.setting_picture)
					this.setting_recording = Boolean(data.setting_recording)
					this.setting_music = Boolean(data.setting_music)
					this.setting_browser = Boolean(data.setting_browser)
					this.setting_camera = Boolean(data.setting_camera)
					this.setting_browserInput = Boolean(data.setting_browserInput)
					this.setting_tfmedia = !Boolean(data.setting_tfmedia)
					this.setting_white_app_value = data.setting_white_app_value
					this.setting_white_app = Boolean(data.setting_white_app)
					this.graph.checkedCities = data.setting_tfmedia_format.filter(item => {
							if (item != null) return item.tfmedia_id == 1
						})
						.map(arr => arr
							.format)
					this.voice.checkedCities = data.setting_tfmedia_format.filter(item => {
							if (item != null) return item.tfmedia_id == 2
						})
						.map(arr => arr
							.format)
					this.videos.checkedCities = data.setting_tfmedia_format.filter(item => {
							if (item != null) return item.tfmedia_id == 3
						})
						.map(arr => arr
							.format)
					this.docum.checkedCities = data.setting_tfmedia_format.filter(item => {
							if (item != null) return item.tfmedia_id == 4
						})
						.map(arr => arr
							.format)
					this.echoArray(this.graph.cities, this.graph.checkedCities)
					this.echoArray(this.voice.cities, this.voice.checkedCities)
					this.echoArray(this.videos.cities, this.videos.checkedCities)
					this.echoArray(this.docum.cities, this.docum.checkedCities)
					console.log('1111111111111111', res.data)
					//全选状态
					this.$nextTick(() => {
						this.graph.checkAll = this.graph.checkedCities.length === this.graph.cities.length
						this.voice.checkAll = this.voice.checkedCities.length === this.voice.cities.length
						this.videos.checkAll = this.videos.checkedCities.length === this.videos.cities
							.length
						this.docum.checkAll = this.docum.checkedCities.length === this.docum.cities.length
					})
				}).catch(err => {})
			},
			echoArray(arr, arrys) {
				arr.forEach(item => {
					arrys.forEach(key => {
						if (item.format == key) {
							item.value = true
						}
					})
				})
			},
			
			//修改系统管控信息
			dataChange(val, name) {
			    let editForm = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: name,
					value: Number(val),
					snId: uni.getStorageSync('snId'),
					id: this.id
				}
				editSetting(editForm).then(res => {
					this.getSettings(uni.getStorageSync('snId'))
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
					this.getSettings(uni.getStorageSync('snId'))
				})
			},
			

			phonesConfirm(val) {
				this.geteditSetting(17, {
					name: 'setting_phones',
					value:  Number(val),
				})
			},
			appConfirm(val) {
				this.geteditSetting(19, {
					setting_white_app_value: this.setting_white_app_value,
					setting_white_app: Number(this.setting_white_app)
				})
			},
			//修改系统管控信息
			geteditSetting(type, parameter) {
				let data = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					id: this.id,
					type: type,
					...parameter
				}
				editSetting(data).then(res => {
					this.getSettings(uni.getStorageSync('snId'))
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			//影音格式事件
			yyChange(val) {
				this.formatShow = true
			},
			formatConfirm() {
				if (this.setting_tfmedia) {
					let graph = this.graph.checkedCities.toString()
					let voice = this.voice.checkedCities.toString()
					let videos = this.videos.checkedCities.toString()
					let docum = this.docum.checkedCities.toString()
					let format = `${graph},${voice},${videos},${docum}`
					console.log('参数', format)
					this.geteditSetting(4, {
						setting_tfmedia_format: format,
						setting_tfmedia: 0
					})
				} else {
					this.formatCancel()
				}

			},
			formatCancel() {
				this.getqueryTypeTfMedia(1)
				this.getqueryTypeTfMedia(2)
				this.getqueryTypeTfMedia(3)
				this.getqueryTypeTfMedia(4)
				this.geteditSetting(4, {
					setting_tfmedia_format: '',
					setting_tfmedia: 1
				})
			},
			//获取图形文件格式
			getqueryTypeTfMedia(type) {
				queryTypeTfMedia({
					type: type
				}).then(res => {
					let arr = res.data.map(item => false)
					let arrs = res.data.map(item => item.format)
					switch (type) {
						case 1:
							this.graph.cities = this.arrayObjer(arrs, arr)
							break;
						case 2:
							this.voice.cities = this.arrayObjer(arrs, arr)
							break;
						case 3:
							this.videos.cities = this.arrayObjer(arrs, arr)
							break;
						case 4:
							this.docum.cities = this.arrayObjer(arrs, arr)
							break;
					}
				})
			},
			manageArr(arr, type) {
				arr.forEach(item => {
					item.value = type ? true : false
				})
				return type ? arr.map(key => key.format) : []
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(value) {
				this.graph.checkAll = value.length === this.graph.cities.length;
				this.graph.checkedCities = value
				console.log('选中任一checkbox时', this.graph.checkedCities)
			},
			// 全选
			checkedAll(val) {
				this.graph.checkedCities = val.value ? this.manageArr(this.graph.cities, 1) : this.manageArr(this.graph
					.cities, 0)
			},
			// 选中任一checkbox时，由checkbox-group触发
			voicecheckboxGroupChange(value) {
				this.voice.checkAll = value.length === this.voice.cities.length;
				this.voice.checkedCities = value
			
			},
			// 全选
			voicecheckedAll(val) {
				this.voice.checkedCities = val.value ? this.manageArr(this.voice.cities, 1) : this.manageArr(this.voice
					.cities, 0)
			},
			// 选中任一checkbox时，由checkbox-group触发
			videoscheckboxGroupChange(value) {
				this.videos.checkedCities = value
				this.videos.checkAll = value.length === this.videos.cities.length;
			},
			// 全选
			videoscheckedAll(val) {
				this.videos.checkedCities = val.value ? this.manageArr(this.videos.cities, 1) : this.manageArr(this.videos
					.cities, 0)
			},
			// 选中任一checkbox时，由checkbox-group触发
			documcheckboxGroupChange(value) {
				this.docum.checkedCities = value
				this.docum.checkAll = value.length === this.docum.cities.length;
			},
			// 全选
			documcheckedAll(val) {
				this.docum.checkedCities = val.value ? this.manageArr(this.docum.cities, 1) : this.manageArr(this.docum
					.cities, 0)
			},
			arrayObjer(arrs, checkbox) {
				let arr = JSON.parse(JSON.stringify(arrs));
				const zip = ([x, ...xs], [y, ...ys]) => {
					if (x === undefined || y === undefined) return [];
					return [
						[x, y], ...zip(xs, ys)
					];
				};
				return zip(arr, checkbox).map(([format, value]) => ({
					format,
					value
				}));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.system_text {
		font-size: 28rpx;
		letter-spacing: 2rpx;
		margin-left: 40rpx;
	}

	.system {
		margin-top: 14.5px;
		border-bottom: 2rpx solid #e8e8e8;
		padding-bottom: 14.5px;
	}

	.system_img {
		width: 80rpx;
		height: 80rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.centers {
		padding: 40rpx;
	}

	.whiteTop {
		border-bottom: 2rpx solid #e8e8e8;
	}

	.remove_trust {
		padding-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.browser-control {
		font-size: 28rpx;

		.remove_control {
			.allow {
				text-align: center;
				width: 20%;
			}

			.rm_allow {
				text-align: center;
				width: 15%;
			}
		}

		.browser-allow {
			border-radius: 12rpx;
			overflow: hidden;
			color: #000;
		}

		.browser-forbid {
			border-radius: 12rpx;
			overflow: hidden;
			color: #ffffff;
		}

		.trust_green {
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.address_txt {
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 40rpx;
	}

	.delete {
		color: #4880ff;
		border: 2rpx solid #4880ff;
		border-radius: $uni-border-radius-lg;
		padding: 8rpx 20rpx;
		letter-spacing: 4rpx;
		font-size: 20rpx;
	}

	.browser-center {
		padding: 40rpx;
		color: #909399;

		.browser-title {
			height: 80rpx;
			line-height: 80rpx;
		}

		.browser-input {
			width: 100%;
			line-height: normal;
			display: inline-table;
			border-collapse: separate;
			border-spacing: 0;
			position: relative;
			font-size: 10px;

			.input-group {
				background-color: #f5f7fa;
				color: #909399;
				vertical-align: middle;
				display: table-cell;
				position: relative;
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				padding: 0 10px;
				width: 1px;
				white-space: nowrap;
				border-right: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

			.input-inner {
				-webkit-appearance: none;
				background-color: #fff;
				background-image: none;
				border-radius: 4px;
				border: 1px solid #dcdfe6;
				box-sizing: border-box;
				color: #606266;
				font-size: inherit;
				height: 40rpx;
				line-height: 40rpx;
				outline: none;
				padding: 0 15px;
				transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
				width: 100%;
				vertical-align: middle;
				display: table-cell
			}
		}
	}
	.format {
		padding: 20rpx;
	
		.select {
			margin-top: 20rpx;
		}
	}
</style>
